<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title></title>
		<!-- element 自定义 css -->
		<link rel="stylesheet" href="../css/element.css" />
		<!-- public 自定义 css -->
		<link rel="stylesheet" href="../css/public.css" />

		<!-- 头部css -->
		<link rel="stylesheet" href="../common/css/header.css" />
		
		<!-- 详情共用样式 -->
		<link rel="stylesheet" href="css/detailInfo.css" />
		
		<!-- 引入echartsjs  -->
		<script type="application/javascript" src="../js/echarts.min.js"></script>

	</head>

	<body>
		<!-- 头部嵌入 -->
		<script type="text/javascript" src="../common/header.js"></script>
		<!-- 导航 嵌入 -->
		<script type="text/javascript" src="../common/nav.js"></script>
		<div class="serverDetail-wrapper section" v-cloak>
			<div class="serverDetail-content-wrapper">
				<div class="serverListNav">
					<span class="nav-item">总览</span>
					<span class="nav-item">云服</span>
					<span class="nav-item">实例自定义/系统名称</span>
				</div>
				<div class="form-wrapper">
					<span class="from-title"><i class="icon el-icon-back"></i>实例自定义/系统名称</span>
					<div class="detailInfoContent fboxRow">
						<div class="imgwrapper"></div>
						<div class="contentwrapper">
							<div class="contentwrapper-info">
								<div class="contentwrapper-info-item">
									<span class="item-title">服务器状态</span>
									<span class="item-val">运行中</span>
								</div>
								<div class="contentwrapper-info-item">
									<span class="item-title">账号密码</span>
									<div class="item-val">
										<span style="position: relative;top: 2px;" v-if="serverInfo.isHidePassword" class="hidePassword">******</span>
										<span v-else class="showPassword">123456</span>
										<!-- &#xe600; -->
										<img  src="./img/visual-default.png" @click="serverInfo.isHidePassword = false" v-if="serverInfo.isHidePassword"
										 style="margin-left: 20px;width: 14px;cursor: pointer;" class="" />
										<img  src="./img/Visual-select.png" @click="serverInfo.isHidePassword = true" v-else
										 style="margin-left: 20px;width: 14px;cursor: pointer;width: 16px;height: 16px;" class="" />
										
									</div>
								</div>

								<div class="contentwrapper-info-item">
									<span class="item-title">操作系统</span>
									<span class="item-val">windows</span>
								</div>
								<div class="contentwrapper-info-item">
									<span class="item-title">地域</span>
									<span class="item-val">运行中</span>
								</div>
								<div class="contentwrapper-info-item">
									<span class="item-title">公网IP</span>
									<div class="item-val fboxRow">
										<span>123456</span>


										<el-popover placement="bottom" width="300" trigger="hover">
											<p style="color: #6462F3;font-size: 12px;" class="desc">注：附加IP是什么，给出附加IP的解释和作用</p>
											<p v-if="!haveAdditionIp" style="color: #9B9AB3;margin-top: 30px;" class="opeartion">
												您还没有附加IP, <span @click="handleClickAddIp" style="color: #6462F3;cursor: pointer;">去添加</span>
											</p>

											<el-table v-if="haveAdditionIp" :data="additonIpData" border style="width: 100%;margin-top: 20px;">
												<el-table-column prop="alredyHaveIp" label="已有IP" width="auto">
												</el-table-column>
												<el-table-column prop="addTime" label="添加时间" width="auto">
												</el-table-column>

											</el-table>
											<p v-if="haveAdditionIp  &&  additonIpData.length < maxAdditionIpNum" style="color: #9B9AB3;margin-top: 20px;"
											 class="opeartion">
												您还可以添加{{canAddIp()}}个附加IP, <span @click="handleClickAddIp" style="color: #6462F3;cursor: pointer;">去添加</span>
											</p>

											<div slot="reference">
												<div style="font-size: 12px;" class="yzButton">附加IP</div>
											</div>
										</el-popover>

									</div>
								</div>
								<div class="contentwrapper-info-item">
									<span class="item-title">私有IP</span>
									<span class="item-val">运行中</span>
								</div>

							</div>
							<div class="contentwrapper-button-wrapper fboxRow">
								<div :class="{'noClick': isOpearing}" @click="handleClickStartserver" class="yzButton">启动</div>
								<div :class="{'noClick': isOpearing}" @click="handleClickRestartserver" class="yzButton">重启</div>
								<div :class="{'noClick': isOpearing}" @click="handleClickCloseserver" class="yzButton">关机</div>
								<div :class="{'noClick': isOpearing}" class="yzButton">VNC</div>
								<div :class="{'noClick': isOpearing}" @click="handleClickResetSystem" class="yzButton">重装系统</div>
								<div :class="{'noClick': isOpearing}" @click="handleClickResetPassword"  class="yzButton">重置密码</div>
							</div>
						</div>
					</div>
				</div>

				<div class="form-wrapper">
					<el-tabs v-model="activeTabName" @tab-click="handleClickTab">
						<el-tab-pane name="first">
							<span class="el-tabs-title" slot="label">实例详情</span>
							<div class="contentInfo-wrapper">
								<p class="content-title">配置信息</p>
								<div class="content-info-wrapper fboxRow">
									<div class="content-info fboxRow">
										<div class="content-info-item">
											<span class="item-key">
												实例规格：
											</span>
											<span class="item-val">
												1核1G
											</span>
										</div>
										<div class="content-info-item">
											<span class="item-key">
												SSD系统盘：
											</span>
											<span class="item-val">
												50G
											</span>
										</div>
										<div class="content-info-item">
											<span class="item-key">
												SSD数据盘：
											</span>
											<span class="item-val">
												100G
											</span>
										</div>

										<div class="content-info-item">
											<span class="item-key">
												公司带宽：
											</span>
											<span class="item-val">
												5Mbps
											</span>
										</div>
										<div class="content-info-item">
											<span class="item-key">
												防御峰值：
											</span>
											<span class="item-val">
												20G
											</span>
										</div>
									</div>
									<div class="content-wrapper fboxRow">
										<div class="yzButton">升级配置</div>
									</div>
								</div>
							</div>
							<div class="contentInfo-wrapper">
								<p class="content-title">订单信息</p>
								<div class="content-info-wrapper fboxRow">
									<div class="content-info fboxRow">
										<div class="content-info-item">
											<span class="item-key">
												订单编号：
											</span>
											<span class="item-val">
												15151473282891
											</span>
										</div>
										<div class="content-info-item">
											<span class="item-key">
												付款金额：
											</span>
											<span class="item-val">
												150： 00
											</span>
										</div>
										<div class="content-info-item">
											<span class="item-key">
												创建时间：
											</span>
											<span class="item-val">
												2020-11-25
											</span>
										</div>

										<div class="content-info-item">
											<span class="item-key">
												到期时间：
											</span>
											<span class="item-val">
												2020-11-30
											</span>
										</div>
										<div class="content-info-item">
											<span class="item-key">
												账单周期：
											</span>
											<span class="item-val">
												5个月
											</span>
										</div>
										<div class="content-info-item">
											<span class="item-key">
												自动续费：
											</span>
											<span class="item-val">
												未开通
											</span>
										</div>
									</div>
									<div class="content-wrapper fboxRow">
										<div @click="dialogRenewVisible = true" class="yzButton mr-10 renew">去续费</div>
										<div @click="dialogAutoRenewVisible = true" class="yzButton">自动续费</div>
									</div>
								</div>
							</div>

						</el-tab-pane>
						<el-tab-pane  class="jiankong" name="second">
							<span class="el-tabs-title" slot="label">监控</span>
							<div class="jiankong-opeartion-wrapper  fboxRow">
								<el-select style="width: 130px"  v-model="adllEcharsTimeSelect">
									<el-option
									  v-for="item in allEcharsTimeOptions"
									  :key="item.value"
									  :label="item.label"
									  :value="item.value">
									</el-option>
								</el-select>
								<el-date-picker
								class="ml-10"
								prefix-icon="el-icon-date"
								value-format="timestamp"
								@change="changeAllEchartsSelectTime"
								  v-model="allEchartsTimeRange"
								  type="datetimerange"
								  range-separator="至"
								  start-placeholder="开始日期"
								  end-placeholder="结束日期">
								</el-date-picker>
								<div @click="downLoadEcharts" class="yzButton echartsButton ml-10">
									<span class="text mr-10">下载</span>
									<i class="download"></i>
								</div>
								
								<div @click="refreshEcharts" class="yzButton echartsButton ml-10">
									<span class="text mr-10">刷新</span>
									<i class="refresh"></i>
								</div>
								
							</div>
							<el-row :gutter="10">
								<el-col class="echarts-col" :sm="12">
									<div class="echarts-titleWrapper fboxRow">
										<span class="title">CPU使用率(%)</span>
										<i @click="blowUpEcharts('cpu')" class="iconfont">&#xe676;</i>
									</div>
									<div id="echarts-cpu-wrapper" class="echarts-wrapper"></div>
								</el-col>
								
								<el-col class="echarts-col" :sm="12">
									<div class="echarts-titleWrapper fboxRow">
										<span class="title">内存用量(MB)</span>
										<i @click="blowUpEcharts('memory')" class="iconfont">&#xe676;</i>
									</div>
									<div  id="echarts-memory-wrapper" class="echarts-wrapper"></div>
								</el-col>
								
								<el-col class="echarts-col" :sm="12">
									<div class="echarts-titleWrapper fboxRow">
										<span class="title">带宽用量(Kbsp)</span>
										<i @click="blowUpEcharts('bindwith')" class="iconfont">&#xe676;</i>
									</div>
									<div id="echarts-bindwith-wrapper" class="echarts-wrapper"></div>
								</el-col>
								
								<el-col class="echarts-col" :sm="12">
									<div class="echarts-titleWrapper fboxRow">
										<span class="title">云盘（I/O）</span>
										<i @click="blowUpEcharts('cloudDisk')" class="iconfont">&#xe676;</i>
									</div>
									<div id="echarts-cloudDisk-wrapper" class="echarts-wrapper"></div>
								</el-col>
							</el-row>
							
							</el-tab-pane>
						<el-tab-pane class="safeGroup" name="third">
							<span class="el-tabs-title" slot="label">安全组</span>
							    <el-table
							      :data="safeGrouptableData"
							      style="width: 100%">
							      <el-table-column
							        prop="name"
							        label="安全组名称"
							        width="auto">
									<template slot-scope="scope">
										{{scope.row.name}}
									</template>
							      </el-table-column>
							      <el-table-column
							        prop="desc"
							        label="描述"
							        width="auto">
									<template slot-scope="scope">
										{{scope.row.desc}}
									</template>
							      </el-table-column>
							      <el-table-column
							        prop="connectMoudle"
							        label="关联实例">
									<template slot-scope="scope">
										{{scope.row.connectMoudle}}个
									</template>
									
							      </el-table-column>
								  <el-table-column
								    prop="rulerNum"
								    label="安全组规则数量">
									<template slot-scope="scope">
										{{scope.row.rulerNum}}个
									</template>
								  </el-table-column>
								  <el-table-column
								    prop="createTime"
								    label="创建时间">
									<template slot-scope="scope">
										{{scope.row.createTime}}
									</template>
								  </el-table-column>
								  <el-table-column
								    prop="operation"
								    label="操作">
									<template slot-scope="scope">
										<span @click="handleClickUntieCloud(scope.row)" class="opearButton">解绑云主机</span>
										<span @click="handleClickConfigRuler(scope.row)" class="opearButton ml-10">配置规则</span>
									</template>
								  </el-table-column>
								  
							    </el-table>
						</el-tab-pane>
						<el-tab-pane class="cloudDisk" label="云盘" name="fourth">
							<span class="el-tabs-title" slot="label">云盘</span>
								<div class="yz-tab-wrapper">
									<div :class="{'active': cloudDiskTabIndex === 0}"  @click="cloudDiskTabIndex = 0" class="yz-tab-item">数据盘</div>
									<div :class="{'active': cloudDiskTabIndex === 1}"  @click="cloudDiskTabIndex = 1" class="yz-tab-item">系统盘</div>
								</div>
								<div v-if="cloudDiskTabIndex === 0" class="diskInfo-wrapper">
									<div :class="{'noClick':dataDisktableData.length > 2}" @click="createDisk" class="yzButton mt-20 mb-20">创建</div>
									<el-table
									  :data="dataDisktableData"
									  style="width: 100%">
									  <el-table-column
									    prop="name"
									    label="云盘名称"
									    width="auto">
										<template slot-scope="scope">
											{{scope.row.name}}
										</template>
									  </el-table-column>
<!-- 									  <el-table-column
									    prop="property"
									    label="云盘属性"
									    width="auto">
										<template slot-scope="scope">
											{{scope.row.property}}
										</template>
									  </el-table-column> -->
									  <el-table-column
									    prop="type"
									    label="云盘种类">
										<template slot-scope="scope">
											{{scope.row.type}}
										</template>
										
									  </el-table-column>
									  <el-table-column
									    prop="size"
									    label="云盘大小">
										<template slot-scope="scope">
											{{scope.row.size}}G
										</template>
									  </el-table-column>
									  <el-table-column
									    prop="status"
									    label="云盘状态">
										<template slot-scope="scope">
											<div v-html="handlestatus(scope.row)"></div>
										</template>
									  </el-table-column>
									  <el-table-column
									    prop="operation"
									    label="操作">
										<template slot-scope="scope">
											<span  v-if="scope.row.status === 'free'"  @click="mountDatadisk(scope.row)" class="opearButton mr-20">挂载</span>
											<span v-if="scope.row.status === 'alive'"  @click="unloadDatadisk(scope.row)" class="opearButton mr-20">卸载</span>
											<span @click="deleteDatadisk(scope.row)" style="color: #F21C30;" @click="handleClickConfigRuler(scope.row)" class="opearButton ml-10">删除</span>
										</template>
									  </el-table-column>
									  
									</el-table>
								</div>
								
								<div v-if="cloudDiskTabIndex === 1" class="diskInfo-wrapper system">
									<el-table
									class="mt-10"
									  :data="systemDisktableData"
									  style="width: 100%">
									  <el-table-column
									    prop="name"
									    label="云盘名称"
									    width="auto">
										<template slot-scope="scope">
											{{scope.row.name}}
										</template>
									  </el-table-column>
<!-- 									  <el-table-column
									    prop="property"
									    label="云盘属性"
									    width="auto">
										<template slot-scope="scope">
											{{scope.row.property}}
										</template>
									  </el-table-column> -->
									  <el-table-column
									    label="云盘类型">
										<template slot-scope="scope">
											SSD
										</template>
										
									  </el-table-column>
									  <el-table-column
									    prop="size"
									    label="云盘大小">
										<template slot-scope="scope">
											{{scope.row.size}}G
										</template>
									  </el-table-column>
									  <el-table-column
									    prop="status"
									    label="云盘状态">
										<template slot-scope="scope">
											<div v-html="handlestatus(scope.row)"></div>
										</template>
									  </el-table-column>
									  
									</el-table>
								</div>
								
							</el-tab-pane>
						<el-tab-pane label="快照" name="fifth">
							<span class="el-tabs-title" slot="label">快照</span>
							<div class="fastPhotoOpeartion-wrapper mb-20 fboxRow">
								<div @click="dialogAddfastPhoto = true" class="yzButton">创建</div>
								  <el-input style="width: 290px;"
								    placeholder="请输入搜索内容"
								    v-model="fastPhotosearch">
									<i style="color: #6462F3;" slot="suffix" class="el-input__icon el-icon-search"></i>
								</el-input>
							</div>
							<el-table
																  :data="fastPhototableData"
																  style="width: 100%">
																  <el-table-column
																    prop="id"
																    label="快照ID"
																    width="auto">
																	<template slot-scope="scope">
																		{{scope.row.id}}
																	</template>
																  </el-table-column>
							<!-- 									  <el-table-column
																    prop="property"
																    label="云盘属性"
																    width="auto">
																	<template slot-scope="scope">
																		{{scope.row.property}}
																	</template>
																  </el-table-column> -->
																  <el-table-column
																    prop="remark"
																    label="备注说明">
																	<template slot-scope="scope">
																		{{scope.row.remark}}
																	</template>
																	
																  </el-table-column>
																  <el-table-column
																    prop="size"
																    label="云盘容量">
																	<template slot-scope="scope">
																		{{scope.row.size}}G
																	</template>
																  </el-table-column>
																  <el-table-column
																    prop="property"
																    label="云盘属性">
																	<template slot-scope="scope">
																		{{scope.row.property}}
																	</template>
																  </el-table-column>
																  <el-table-column
																    prop="createTime"
																    label="创建时间">
																	<template slot-scope="scope">
																		{{scope.row.createTime}}
																	</template>
																  </el-table-column>
																  
																  <el-table-column
																    prop="operation"
																    label="操作">
																	<template slot-scope="scope">
																		<span @click="returnScrollFastphoto(scope.row)" class="opearButton mr-20">回滚</span>
																		<span @click="deleteFastphoto(scope.row)" style="color: #F21C30;" class="opearButton ml-10">删除</span>
																	</template>
																  </el-table-column>
																  
																</el-table>
																
																<div class="pagination-wrapper">
																  <div class="total-wrapper">
																	  <span class="totalSize">共有 {{fastPhotopageInfo.totalSize}} 条记录</span>
																	  <el-select v-model="fastPhotopageInfo.pagesize">
																		    <el-option
																		      v-for="item in fastPhotopageOptions"
																		      :key="item.value"
																		      :label="item.label"
																		      :value="item.value">
																		    </el-option>
																	  </el-select>
																  </div>
																  <el-pagination
																	@size-change="handleSizeChange"
																	@current-change="handleCurrentChange"
																	:current-page="fastPhotopageInfo.currentPage"
																	layout="prev, pager, next, jumper"
																	:total="fastPhotopageInfo.totalSize">
																  </el-pagination>
																</div>
							
						</el-tab-pane>
						
						
						<el-tab-pane label="操作日志" name="sixth">
							<span class="el-tabs-title" slot="label">操作日志</span>
							<el-date-picker
							class="mb-20"
							prefix-icon="el-icon-date"
							value-format="timestamp"
							@change="changeLogselectTime"
							  v-model="logTimeRange"
							  type="datetimerange"
							  range-separator="至"
							  start-placeholder="开始日期"
							  end-placeholder="结束日期">
							</el-date-picker>
							<el-table
																  :data="logotableData"
																  style="width: 100%">
																  <el-table-column
																    prop="id"
																    label="序号"
																    width="auto">
																	<template slot-scope="scope">
																		{{scope.row.id}}
																	</template>
																  </el-table-column>
							<!-- 									  <el-table-column
																    prop="property"
																    label="云盘属性"
																    width="auto">
																	<template slot-scope="scope">
																		{{scope.row.property}}
																	</template>
																  </el-table-column> -->
																  <el-table-column
																    prop="type"
																    label="操作类型">
																	<template slot-scope="scope">
																		{{scope.row.type}}
																	</template>
																	
																  </el-table-column>
																  <el-table-column
																    prop="time"
																    label="操作时间">
																	<template slot-scope="scope">
																		{{scope.row.time}}
																	</template>
																  </el-table-column>
																  <el-table-column
																    prop="status"
																    label="状态">
																	<template slot-scope="scope">
																		<div v-html="handleLogstatus(scope.row)"></div>
																	</template>
																  </el-table-column>
																  <el-table-column
																    prop="iP"
																    label="Ip">
																	<template slot-scope="scope">
																		{{scope.row.ip}}
																	</template>
																  </el-table-column>
																  
							
																  
																</el-table>
																
																<div class="pagination-wrapper">
																  <div class="total-wrapper">
																	  <span class="totalSize">共有 {{logpageInfo.totalSize}} 条记录</span>
																	  <el-select v-model="logpageInfo.pagesize">
																		    <el-option
																		      v-for="item in logpageOptions"
																		      :key="item.value"
																		      :label="item.label"
																		      :value="item.value">
																		    </el-option>
																	  </el-select>
																  </div>
																  <el-pagination
																	@size-change="handleSizeLogChange"
																	@current-change="handleCurrentLogChange"
																	:current-page="logpageInfo.currentPage"
																	layout="prev, pager, next, jumper"
																	:total="logpageInfo.totalSize">
																  </el-pagination>
																</div>
							
						</el-tab-pane>
						
						
						
					</el-tabs>
				</div>

			</div>
			
			<el-dialog @close="closedialogAddCloudServer" style="box-sizing: border-box;" width="640px" class="yz-el-dialog" :visible.sync="dialogAddCloudServer">
				<div slot="title" class="dialog-title">
					添加云盘
				</div>
				<div class="dialog-content" style="min-height: 200px;">
					<el-form ref="form"  label-width="80px">
						<el-form-item label="云盘大小:">
							<div v-for="(item,index) in addcloudServerGroup" :key="index" class="dataInfo fboxRow">
								<el-select style="width: 140px;" v-model="item.type" placeholder="请选择类型">
									<el-option v-for="option in cloudServerTypeGroup" :key="option.value" :label="option.label" :value="option.value">
									</el-option>
								</el-select>
								<div class="ml-10 inputNumber-wrapper fboxRow">
									<el-input-number style="width: 150px;" class="inputNumber" v-model="item.num" maxlength="5" step-strictly="true" controls-position="right" @keyup.native="handlecloudServerNumChange" :min="10" :max="1000" :step="10"></el-input-number>
									<span class="unit">GB</span>
								</div>
								<div @click="handleClickAddDisk" v-if="addcloudServerGroup.length < 3 && index === 0 && dataDisktableData.length < 2" class="opeartion-wrapper fboxCenter ml-10">
									<i style="color: #6462F3;" class="icon el-icon-circle-plus"></i>
									<span class="flagText">添加一块</span>
								</div>
								<div  @click="handleClickremoveDisk(item,index)" v-if="addcloudServerGroup.length > 1 && index !== 0" class="opeartion-wrapper fboxCenter ml-10">
									<i style="color: #F21C30;" class="icon el-icon-remove"></i>
								</div>
							</div>
							<p class="addDesc mt-10">
                               您还可以添加 <span style="color: #F21C30;">{{canAddDiskNum()}}</span> 块数据盘，范围为10-1000G
                            </p>

						</el-form-item>
			
					</el-form>
			
					<div class="dialog-button-wrapper fboxRow">
						<div @click="confirmAddCloudServer" class="yzButton  confirm">确认</div>
						<div @click="dialogAddCloudServer = false" class="yzButton cancelButton">取消</div>
					</div>
					<div class="dialog-price-wrapper  fboxRow">
						<span class="price-title">费用总计：</span>
						<p class="price">
							<span class="price-num">1381.06</span>
							<span class="price-unit">元</span>
						</p>
					</div>
				</div>
			</el-dialog>
			
			<el-dialog @close="closedialogAddfastPhoto" style="box-sizing: border-box;" width="640px" class="yz-el-dialog" :visible.sync="dialogAddfastPhoto">
				<div slot="title" class="dialog-title">
					创建快照 <i class="icon el-icon-question"></i>
				</div>
				<div class="dialog-content" style="min-height: 200px;">
					<el-form ref="addfastPhotoform" :model="addfastPhotoform" label-width="80px">
						<el-form-item label="磁盘属性:">
							<el-select style="width: 320px;" v-model="addfastPhotoform.type" placeholder="请选择类型">
								<el-option v-for="option in diskTypeGroup" :key="option.value" :label="option.label" :value="option.value">
								</el-option>
							</el-select>
						</el-form-item>
						
						<el-form-item label="选择磁盘:">
							<el-select style="width: 320px;" v-model="addfastPhotoform.diskId" placeholder="请选择磁盘">
								<el-option v-for="option in fastPhotoDiskGroup" :key="option.id" :label="option.label" :value="option.id">
								</el-option>
							</el-select>
						</el-form-item>
						
						<el-form-item label="备注说明:">
							<el-input style="width: 320px;"
							  type="textarea"
							  placeholder="请输入内容"
							  v-model="addfastPhotoform.remark"
							  maxlength="50"
							  show-word-limit
							>
						</el-form-item>
						
			
					</el-form>
			
					<div class="dialog-button-wrapper fboxRow">
						<div @click="confirmAddfastPhoto" class="yzButton  confirm">确认</div>
						<div @click="dialogAddfastPhoto = false" class="yzButton cancelButton">取消</div>
					</div>
				</div>
			</el-dialog>
			
			
			<el-dialog style="box-sizing: border-box;" width="640px" class="yz-el-dialog" :visible.sync="dialogAddIpVisible">
				<div slot="title" class="dialog-title">
					添加IP
				</div>
				<div class="dialog-content">
					<el-form ref="form" :model="addIpform" label-width="80px">
						<el-form-item label="公网IP:">
							<el-select v-model="addIpform.canaddnum" placeholder="请选择IP数量">
								<el-option v-for="item in addIpOptions" :key="item.value" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-form-item>

						<el-form-item label="费用总计:">
							<p class="form-item-val">{{ addIpform.price}}<span style="font-size: 14px;">元</span></p>
						</el-form-item>
					</el-form>

					<div class="dialog-button-wrapper fboxRow">
						<div @click="confirmAddIp" class="yzButton  confirm">确认</div>
						<div @click="dialogAddIpVisible = false" class="yzButton cancelButton">取消</div>
					</div>
				</div>
			</el-dialog>
			
			<el-dialog style="box-sizing: border-box;" width="640px" class="yz-el-dialog" :visible.sync="dialogUnbindServer">
				<div slot="title" class="dialog-title">
					解绑云主机
				</div>
				<div class="dialog-content">
					<div class="dialog-content-infowrapper fboxRow mb-20">
						<img class="mr-20 flagImg" src="../img/warning-red.png"/>
						<p class="fboxCenter" style="line-height: 25px;">您确定要解绑吗，解绑后实例将对出入方向完全放行状态，将增加一定的风险，请慎重</p>
					</div>
					
					
					<div class="dialog-button-wrapper fboxRow">
						<div @click="confirmUnbindServer" class="yzButton  confirm">确认</div>
						<div @click="dialogUnbindServer = false" class="yzButton cancelButton">取消</div>
					</div>
				</div>
			</el-dialog>
			
			<el-dialog style="box-sizing: border-box;" width="640px" class="yz-el-dialog" :visible.sync="dialogStartServer">
				<div slot="title" class="dialog-title">
					启动服务器
				</div>
				<div class="dialog-content">
					<div class="dialog-content-infowrapper fboxRow mb-20">
						<img class="mr-20 flagImg" src="../img/warning-orange02.png"/>
						<p class="fboxCenter" style="line-height: 25px;">
							您将对选中的服务器执行启动操作，是否确定该操作？
						</p>
					</div>
					
					
					<div class="dialog-button-wrapper fboxRow">
						<div @click="confirmStartserver" class="yzButton  confirm">确认</div>
						<div @click="dialogStartServer = false" class="yzButton cancelButton">取消</div>
					</div>
				</div>
			</el-dialog>
			
			
			<el-dialog @closed="closedialogRestartServer" style="box-sizing: border-box;" width="640px" class="yz-el-dialog" :visible.sync="dialogRestartServer">
				<div slot="title" class="dialog-title">
					重启服务器
				</div>
				<div class="dialog-content">
					<div class="dialog-content-infowrapper fboxRow mb-20">
						<img class="mr-20 flagImg" src="../img/warning-red.png"/>
						<p class="fboxCenter" style="line-height: 25px;">
							您将对选中的服务器执行重启操作，是否确定该操作？
						</p>
					</div>
					<div class="dialog-selectMethod-wrapper mt-10">
						<p> 请选择重启方式：</p>
						<div class="method-item" >
							<el-radio v-model="restartRadio" label="1">正常重启</el-radio>
							<span class="item-desc green">推荐</span>
						</div>
						<div class="method-item" >
							<el-radio v-model="restartRadio" label="2">强制重启</el-radio>
							<span class="item-desc red">强制重启可能会导致未保持的数据丢失，不建议</span>
						</div>
						
					</div>
					
					
					<div class="dialog-button-wrapper fboxRow">
						<div @click="confirmRestartserver" class="yzButton  confirm">确认</div>
						<div @click="dialogRestartServer = false" class="yzButton cancelButton">取消</div>
					</div>
				</div>
			</el-dialog>
			
			<el-dialog @closed="closedialogClosedServer" style="box-sizing: border-box;" width="640px" class="yz-el-dialog" :visible.sync="dialogCloseServer">
				<div slot="title" class="dialog-title">
					关闭服务器
				</div>
				<div class="dialog-content">
					<div class="dialog-content-infowrapper fboxRow mb-20">
						<img class="mr-20 flagImg" src="../img/warning-orange02.png"/>
						<p class="fboxCenter" style="line-height: 25px;">
							您将对选中的服务器执行关机操作，是否确定该操作？
						</p>
					</div>
					<div class="dialog-selectMethod-wrapper mt-10">
						<p> 请选择关机方式：</p>
						<div class="method-item" >
							<el-radio v-model="closeRadio" label="1">正常关机</el-radio>
							<span class="item-desc green">推荐</span>
						</div>
						<div class="method-item" >
							<el-radio v-model="closeRadio" label="2">强制重启</el-radio>
							<span class="item-desc red">强制关机可能会导致未保持的数据丢失，不建议</span>
						</div>
						
					</div>
					
					
					<div class="dialog-button-wrapper fboxRow">
						<div @click="confirmCloseserver" class="yzButton  confirm">确认</div>
						<div @click="dialogCloseServer = false" class="yzButton cancelButton">取消</div>
					</div>
				</div>
			</el-dialog>
			
			
			<el-dialog @closed="closedialogResetSystem" style="box-sizing: border-box;" width="640px" class="yz-el-dialog" :visible.sync="dialogResetSystem">
				<div slot="title" class="dialog-title">
					重装系统
				</div>
				<div class="dialog-content">
					<div class="dialog-content-infowrapper fboxRow mb-20">
						<img class="mr-20 flagImg" src="../img/warning-red.png"/>
						<p class="fboxCenter" style="line-height: 25px;">
							您将对选中的服务器执行重装系统操作，请重装系统前将数据备份，重装后数据无法找回，是否确定该操作?
						</p>
					</div>
					<div class="dialog-selectMethod-wrapper mt-10">
						<p>重装系统前请先将云服务器关机，或勾选下方 "<span style="color:#F21C30 ;">立即关机重装系统</span>"</p>
						<div class="method-item restart" >
							<el-radio style="color: #F21C30 !important;" v-model="resetSystemRadio" label="1">立即关机重装系统</el-radio>
						</div>
						
					</div>
					
					
					<div class="dialog-button-wrapper fboxRow">
						<div @click="confirmResetSystem" class="yzButton  confirm">确认</div>
						<div @click="dialogResetSystem = false" class="yzButton cancelButton">取消</div>
					</div>
				</div>
			</el-dialog>
			
			<el-dialog  style="box-sizing: border-box;" width="640px" class="yz-el-dialog" :visible.sync="dialogResetPassword">
				<div slot="title" class="dialog-title">
					重设密码
				</div>
				<div class="dialog-content">
					<div class="dialog-content-infowrapper fboxRow mb-20">
						<img class="mr-20 flagImg" src="../img/warning-red.png"/>
						<p class="fboxCenter" style="line-height: 25px;">
							您将对选中的服务器执行重设密码操作，是否确定该操作？
						</p>
					</div>
					<div style="margin-top: 30px;" class="dialog-selectMethod-wrapper">
						<p style="padding-left: 70px;">重设密码后会自动重启服务器，可能会导致数据的丢失，请先保存数据</p>
						
					</div>
					
					
					<div class="dialog-button-wrapper fboxRow">
						<div @click="confirmResetPassword" class="yzButton  confirm">确认</div>
						<div @click="dialogResetPassword = false" class="yzButton cancelButton">取消</div>
					</div>
				</div>
			</el-dialog>
			
			<el-dialog @closed="closedialogVerifyIdentity"  style="box-sizing: border-box;" width="640px" class="yz-el-dialog" :visible.sync="dialogVerifyIdentity">
				<div slot="title" class="dialog-title">
					身份验证
				</div>
				<div class="dialog-content verifyIdentity">
					<div class="dialog-content-desc">
						您将对服务器进行重要的操作，请进行身份的验证，验证30分钟内有效
					</div>
					<p class="text">
                       验证码将发送到您的手机号：<span class="phoneNum">123456789</span> 请注意查收
					</p>
					<!-- 验证码 -->
					<el-form style="margin-bottom: 40px;padding-left: 20px;"  ref="vercoderRules" label-width="0px" class="demo-ruleForm">
						
					<el-form-item prop="vercode">
						<div :class="{'formError': isErrorverifiCode}" class="verificationCode-wrapper fboxRow mt-20">
							<div class="input-wrapper">
								<el-input style="width: 320px;" type="text" class="card-box-input" placeholder="请输入验证码" v-model="verificationCode">
									
								</el-input>
								 <span v-if="isErrorverifiCode" class="error-text">验证码输入错误，请重新输入</span>
							</div>

							<div class="yzButton" @click="handleClickSendverificationCode" :class="{'noClick': !phoneCanSendverificationCode}">
								{{handleVerificationCodeText()}}
							</div>
						</div>
					</el-form-item>	

					</el-form>
					
					<div class="dialog-button-wrapper fboxRow">
						<div @click="confirmVerifyIdentity" class="yzButton  confirm">确认</div>
						<div @click="dialogVerifyIdentity = false" class="yzButton cancelButton">取消</div>
					</div>

					
				</div>
			</el-dialog>
			
			
			
			<el-dialog @closed="closedialogResetSystemDetail" style="box-sizing: border-box;" width="640px" class="yz-el-dialog" :visible.sync="dialogResetSystemDetail">
				<div slot="title" class="dialog-title">
					重装系统
				</div>
				<div class="dialog-content">
					<div class="yz-tab-wrapper fboxCenter">
						<div :class="{'active': resetSystemSelectIndex === 0}"  @click="resetSystemSelectIndex = 0" class="yz-tab-item">重置当前系统</div>
						<div :class="{'active': resetSystemSelectIndex === 1}"  @click="resetSystemSelectIndex = 1" class="yz-tab-item">重置为其他系统</div>
					</div>
					<div  v-if="resetSystemSelectIndex === 0" class="yz-tabcontent-wrapper">
						<p class="mb-20">当前系统</p>
						<p class="mb-10">Windows</p>
						<div class="detailInfo-wrapper">
							<span class="detailInfo-item">
								12.123.123.12
							</span>
							<span class="detailInfo-item">
								BT-panner 6.9.8
							</span>
							<span class="detailInfo-item">
								中国香港
							</span>
							<span class="detailInfo-item green">
								运行中
							</span>
						</div>
					</div>
					<div  v-if="resetSystemSelectIndex === 1" class="yz-tabcontent-wrapper other">
						<p class="mb-20">当前系统</p>
						<p class="mb-10">Windows</p>
						<div class="detailInfo-wrapper">
							<span class="detailInfo-item">
								12.123.123.12
							</span>
							<span class="detailInfo-item">
								BT-panner 6.9.8
							</span>
							<span class="detailInfo-item">
								中国香港
							</span>
							<span class="detailInfo-item green">
								运行中
							</span>
						</div>
						<div class="systemSelect-wrapper">
							<el-row :gutter="5">
								<el-col :sm="6">
									<div 
									  class="image-content-wrapper active">
									  <div class="content-info">
									    <div class="info-system fboxRow">
									      <img src="../img/systemIcon/cent-os.png" class="system-flag"/>
									      <span class="system-name">
									        CentOS
									      </span>
									    </div>
									    <el-select class="wt100" value="" placeholder="请选择">
									      <el-option label="3344555" value="">
									      </el-option>
									
									      <el-option label="66666" value="">
									      </el-option>
									
									    </el-select>
									
									  </div>
									</div>
								</el-col>
								<el-col :sm="6">
									<div 
									  class="image-content-wrapper">
									  <div class="content-info">
									    <div class="info-system fboxRow">
									      <img src="../img/systemIcon/debian.png" class="system-flag"/>
									      <span class="system-name">
									        Debain
									      </span>
									    </div>
									    <el-select class="wt100" value="" placeholder="请选择">
									      <el-option label="3344555" value="">
									      </el-option>
									
									      <el-option label="66666" value="">
									      </el-option>
									
									    </el-select>
									
									  </div>
									</div>
								</el-col>
								<el-col :sm="6">
									<div 
									  class="image-content-wrapper">
									  <div class="content-info">
									    <div class="info-system fboxRow">
									      <img src="../img/systemIcon/ubuntu.png" class="system-flag"/>
									      <span class="system-name">
									        Ubuntu
									      </span>
									    </div>
									    <el-select class="wt100" value="" placeholder="请选择">
									      <el-option label="3344555" value="">
									      </el-option>
									
									      <el-option label="66666" value="">
									      </el-option>
									
									    </el-select>
									
									  </div>
									</div>
								</el-col>
								<el-col :sm="6">
									<div 
									  class="image-content-wrapper">
									  <div class="content-info">
									    <div class="info-system fboxRow">
									       <img src="../img/systemIcon/do-windows.png" class="system-flag"/>
									      <span class="system-name">
									        Windows
									      </span>
									    </div>
									    <el-select class="wt100" value="" placeholder="请选择">
									      <el-option label="3344555" value="">
									      </el-option>
									
									      <el-option label="66666" value="">
									      </el-option>
									
									    </el-select>
									
									  </div>
									</div>
								</el-col>
							</el-row>
						</div>
					</div>

					
					
					<div class="dialog-button-wrapper fboxRow">
						<div @click="confirmResetSystemDeatail" class="yzButton  confirm">确认重置</div>
						<div @click="dialogResetSystemDetail = false" class="yzButton cancelButton">取消</div>
					</div>
				</div>
			</el-dialog>
			
			
			
			
			<el-dialog style="box-sizing: border-box;" width="640px" class="yz-el-dialog" :visible.sync="dialogRemovefastPhoto">
				<div slot="title" class="dialog-title">
					删除快照<i style="margin-left: 5px;" class="icon el-icon-question"></i>
				</div>
				<div class="dialog-content">
					<div class="dialog-content-infowrapper fboxRow mb-20">
						<img class="mr-20 flagImg" src="../img/warning-red.png"/>
						<p style="line-height: 25px;">
							 您将对选中的快照进行删除操作，执行该操作前需备份，否则将导致云盘的数据丢失，建议您慎重！，是否确定该操作？
						</p>
					</div>
					
					
					<div class="dialog-button-wrapper fboxRow">
						<div @click="confirmRemovefastPhoto" class="yzButton  confirm">确认</div>
						<div @click="dialogRemovefastPhoto = false" class="yzButton cancelButton">取消</div>
					</div>
				</div>
			</el-dialog>
			
			<el-dialog style="box-sizing: border-box;" width="640px" class="yz-el-dialog" :visible.sync="dialogReturnScrollfastPhoto">
				<div slot="title" class="dialog-title">
					回滚快照<i style="margin-left: 5px;" class="icon el-icon-question"></i>
				</div>
				<div class="dialog-content">
					<div class="dialog-content-infowrapper fboxRow mb-20">
						<img class="mr-20 flagImg" src="../img/warning-orange02.png"/>
						<p style="line-height: 25px;">
							 您将对选中的快照进行回滚操作，回滚之后快照将回到您之前的状态，是否确定该操作？
						</p>
					</div>
					
					
					<div class="dialog-button-wrapper fboxRow">
						<div @click="confirmReturnScrollfastPhoto" class="yzButton  confirm">确认</div>
						<div @click="dialogReturnScrollfastPhoto = false" class="yzButton cancelButton">取消</div>
					</div>
				</div>
			</el-dialog>
			
			
			<el-dialog style="box-sizing: border-box;" width="640px" class="yz-el-dialog" :visible.sync="dialogRemoveServer">
				<div slot="title" class="dialog-title">
					删除云盘
				</div>
				<div class="dialog-content">
					<div class="dialog-content-infowrapper fboxRow mb-20">
						<img class="mr-20 flagImg" src="../img/warning-red.png"/>
						<p style="line-height: 25px;">
							您将对选中的云盘进行删除操作，执行该操作将导致云盘的数据丢失，并将彻底删除该云盘，不可恢复，建议您慎重！是否确定该操作？
						</p>
					</div>
					
					
					<div class="dialog-button-wrapper fboxRow">
						<div @click="confirmRemoveServer" class="yzButton  confirm">确认</div>
						<div @click="dialogRemoveServer = false" class="yzButton cancelButton">取消</div>
					</div>
				</div>
			</el-dialog>
			
			
			<el-dialog @closed="closeddialogEcharts"close style="box-sizing: border-box" width="1200px" class="yz-el-dialog" :visible.sync="dialogEcharts">
				<div slot="title" class="dialog-title">
												<div style="padding-bottom: 0px;" class="jiankong-opeartion-wrapper  fboxRow">
													<el-select style="width: 130px"  v-model="adllEcharsTimeSelect">
														<el-option
														  v-for="item in allEcharsTimeOptions"
														  :key="item.value"
														  :label="item.label"
														  :value="item.value">
														</el-option>
													</el-select>
													<el-date-picker
													class="ml-10"
													prefix-icon="el-icon-date"
													value-format="timestamp"
													@change="changeSelectEchartsSelectTime"
													  v-model="selectEchartsTimeRange"
													  type="datetimerange"
													  range-separator="至"
													  start-placeholder="开始日期"
													  end-placeholder="结束日期">
													</el-date-picker>
													<div @click="downLoadEcharts" class="yzButton echartsButton ml-10">
														<span class="text mr-10">下载</span>
														<i class="download"></i>
													</div>
													
													<div @click="refreshEcharts" class="yzButton echartsButton ml-10">
														<span class="text mr-10">刷新</span>
														<i class="refresh"></i>
													</div>
													
												</div>
				</div>
				<div class="dialog-content">
					<div  class="echarts-titleWrapper fboxRow mb-20">
						<span class="title">{{handleEchartsTitle()}}</span>
						<div v-if="selectEcharts === 'bindwith'" class="desc-wrapper">
							<span>流入最新流量：2.48Kbps</span>
							<span>流入平均流量：2.48Kbps</span>
							<span>流入最大流量：2.48Kbps</span>
							<span>流出最新流量：2.48Kbps</span>
							<span>流出平均流量：2.48Kbps</span>
							<span>流出最大流量：2.48Kbps</span>
						</div>
						
						<div v-if="selectEcharts === 'cloudDisk'">
								<el-select style="width: 150px"  v-model="selectCloudDisk">
									<el-option
									  v-for="item in cloudDiskOptions"
									  :key="item.id"
									  :label="item.label"
									  :value="item.id">
									</el-option>
								</el-select>
						</div>
						
						
					</div>
					<div  id="echarts-detail-wrapper" class="echarts-wrapper"></div>
				</div>
			</el-dialog>
			
			

			<el-dialog width="940px" class="yz-el-dialog" :visible.sync="dialogAutoRenewVisible">
				<div slot="title" class="dialog-title">
					设置自动续费
				</div>
				<div class="dialog-content">

					<el-table :data="reNewProductInfo" style="width: 100%">
						<!-- 占位 使用 -->
						<el-table-column width="20" label="">
						</el-table-column>
						<!-- 占位 使用end -->

						<el-table-column prop="productType" label="产品名称/类型">
							<template slot-scope="scope">
								<p class="productName">{{scope.row.productName}}</p>

								<p class="productType">{{scope.row.productType}}</p>

							</template>
						</el-table-column>

						<el-table-column width="300px" label="具体配置">
							<template slot-scope="scope">
								<div class="fboxRow">
									<div class="detail-info">
										<span class="info-unit">CPU:</span>
										<span class="info-val">{{scope.row.cpu}}核</span>
									</div>
									<div class="detail-info">
										<span class="info-unit">数据盘:</span>
										<span class="info-val">{{scope.row.dataDisk}}G</span>
									</div>
								</div>
								<div class="fboxRow">
									<div class="detail-info">
										<span class="info-unit">内存:</span>
										<span class="info-val">{{scope.row.raw}}G</span>
									</div>
									<div class="detail-info">
										<span class="info-unit">带宽:</span>
										<span class="info-val">{{scope.row.bindWith}}G</span>
									</div>
								</div>
								<div class="fboxRow">
									<div class="detail-info">
										<span class="info-unit">SSD:</span>
										<span class="info-val">{{scope.row.ssd}}G</span>
									</div>
									<div class="detail-info">
										<span class="info-unit">操作系统:</span>
										<span class="info-val">{{scope.row.opearSystem}}</span>
									</div>
								</div>
								<div class="fboxRow">
									<div class="detail-info">
										<span style="min-width: 32px;" class="info-unit">IP:</span>
										<span class="info-val">{{scope.row.ip}}个</span>
									</div>
								</div>

							</template>
						</el-table-column>
						<el-table-column prop="ipaddress" label="IP地址">
						</el-table-column>
						<el-table-column prop="sumMoney" label="总金额">
						</el-table-column>
						<el-table-column prop="date" label="到期时间">
						</el-table-column>
					</el-table>
					<div class="autoRenew-wrapper">
						<div class="autoRenewInfo fboxRow">
							<span class="title">续费时间：</span>
							<el-select style="width: 178px;color: #777777;" v-model="activeAutoRenewTime">
								<el-option v-for="(item,index) in autoRenewTimeGroup" :key="index" :label="item.name" :value="item.value">
								</el-option>
							</el-select>
						</div>
						<p class="autoRenewDesc">注：选定续费时间后，将会在指定时间凌晨自动从余额扣款，如果余额不足，将会自动为您生成续费订单，我们将通过短信和邮箱的形式提醒您</p>
					</div>
					<div class="renewTime-wrapper mt-20">
						<span>续费周期</span>
						<div class="renewButton-wrapper fboxRow mt-20">
							<div :class="{'active': item.value === activeRenewTime}" @click="selectRenewTime(item)" v-for="(item,index) in  renewButtonGroup"
							 class="mr-10 yzButton renewButton">
								<img v-if="item.haveSale" src="../img/sizegift.png" />
								<span>{{item.name}}</span>
								<div v-if="item.haveSale" class="yz-tooltip saletooltip">{{item.saleContext}}</div>
							</div>
						</div>

					</div>
					<div class="dialog-button-wrapper fboxRow">
						<div @click="confirmautoRenew" class="yzButton  confirm">确认</div>
						<div @click="cancelautoRenew" class="yzButton cancelButton">取消</div>
					</div>
					<div class="dialog-price-wrapper  fboxRow">
						<span class="price-title">续费金额</span>
						<p class="price">
							<span class="price-num">1381.06</span>
							<span class="price-unit">元</span>
						</p>
					</div>

				</div>

			</el-dialog>
			<el-dialog width="940px" class="yz-el-dialog" :visible.sync="dialogRenewVisible">
				<div slot="title" class="dialog-title">
					续费设置
				</div>
				<div class="dialog-content">
					
					<el-table :data="reNewProductInfo" style="width: 100%">
						<!-- 占位 使用 -->
						<el-table-column width="20" label="">
						</el-table-column>
						<!-- 占位 使用end -->
						
						<el-table-column prop="productType" label="产品名称/类型">
							<template slot-scope="scope">
								<p class="productName">{{scope.row.productName}}</p>
								<p class="productType">{{scope.row.productType}}</p>
								
							</template>
						</el-table-column>
						
						<el-table-column width="300px"  label="具体配置">
							<template slot-scope="scope">
								<div class="fboxRow">
									<div class="detail-info">
										<span class="info-unit">CPU:</span>
										<span class="info-val">{{scope.row.cpu}}核</span>
									</div>
									<div class="detail-info">
										<span class="info-unit">数据盘:</span>
										<span class="info-val">{{scope.row.dataDisk}}G</span>
									</div>
								</div>
								<div class="fboxRow">
									<div class="detail-info">
										<span class="info-unit">内存:</span>
										<span class="info-val">{{scope.row.raw}}G</span>
									</div>
									<div class="detail-info">
										<span class="info-unit">带宽:</span>
										<span class="info-val">{{scope.row.bindWith}}G</span>
									</div>
								</div>
								<div class="fboxRow">
									<div class="detail-info">
										<span class="info-unit">SSD:</span>
										<span class="info-val">{{scope.row.ssd}}G</span>
									</div>
									<div class="detail-info">
										<span class="info-unit">操作系统:</span>
										<span class="info-val">{{scope.row.opearSystem}}</span>
									</div>
								</div>
								<div class="fboxRow">
									<div class="detail-info">
										<span style="min-width: 32px;" class="info-unit">IP:</span>
										<span class="info-val">{{scope.row.ip}}个</span>
									</div>
								</div>
								
							</template>
						</el-table-column>
						<el-table-column prop="ipaddress" label="IP地址">
						</el-table-column>
						<el-table-column prop="sumMoney" label="总金额">
						</el-table-column>
						<el-table-column prop="date" label="到期时间">
						</el-table-column>
					</el-table>
					<div class="renewTime-wrapper mt-20">
						<span>续费周期</span>
						<div class="renewButton-wrapper fboxRow mt-20">
							<div :class="{'active': item.value === activeRenewTime}" @click="selectRenewTime(item)" v-for="(item,index) in  renewButtonGroup" class="mr-10 yzButton renewButton">
								<img v-if="item.haveSale" src="../img/sizegift.png" />
								<span>{{item.name}}</span>
								<div v-if="item.haveSale" class="yz-tooltip saletooltip">{{item.saleContext}}</div>
							</div>
						</div>
						
					</div>
					<div class="dialog-button-wrapper fboxRow">
						<div @click="confirmRenew" class="yzButton  confirm">确认</div>
						<div @click="cancelRenew" class="yzButton cancelButton">取消</div>
					</div>
					<div class="dialog-price-wrapper  fboxRow">
						<span class="price-title">续费金额</span>
						<p class="price">
							<span class="price-num">1381.06</span>
							<span class="price-unit">元</span>
						</p>
					</div>
					
				</div>
			
			</el-dialog>


		</div>
		<script src="../js/util.js"></script>
		<!-- vue  -->
		<script>
			let vmServerDetail = new Vue({

				el: '.serverDetail-wrapper',
				computed: function() {
				
				},
				data: function() {
					return {
						fastPhotosearch:undefined, // 快照搜索
						addfastPhotoform: {
							diskId:undefined,
							// data 数据盘  ；system 系统盘
							type:'data',
							remark:''
						},
						diskTypeGroup:[{
							value:'data',
							label:'数据盘',
						}, {
							value:'system',
							label:'系统盘',
						}],
						fastPhotoDiskGroup:[{
							id:1021,
							label:'磁盘1'
						},{
							id:103,
							label:'磁盘2'
						},{
							id:123,
							label:'磁盘3'
						}
							
						],
						
						// 当前操作的磁盘
						activeSelectDisk:{
							
						},
						// 当前操作的快照
						activeSelectfastPhoto: {
							
						},
						// 云盘类型可选数组
						cloudServerTypeGroup:[{
							label:'性能型',
							value:'performance'
						},{
							label:'内存型',
							value:'memory'
						}],
						// 添加数据盘信息数据
						addcloudServerGroup: [{
							// memory 内存型 ； performance 性能型
							type:'performance',
							num:10,
						}
							
							
						],
						
						cloudDiskTabIndex:0 ,// 0 数据盘 ； 1 系统盘  默认 展示 数据盘
						// 数据盘 信息数据
						// dataDisktableData:[{
						// 	id:234,
						// 	name: '小将云盘',
						// 	property:'数据盘',
						// 	type:'性能型',
						// 	size:'50',
						// 	status:'alive'
							
						// },{
						// 	id:235,
						// 	name: '拉了云盘',
						// 	property:'数据盘',
						// 	type:'性能型',
						// 	size:'50',
						// 	status:'free'
							
						// }],
						// 系统盘表格数据
						systemDisktableData:[{
							id:234,
							name: '小将云盘',
							size:'50',
							status:'alive'
						},{
							id:234,
							name: '小将云盘',
							size:'50',
							status:'alive'
						},{
							id:234,
							name: '小将云盘',
							size:'50',
							status:'alive'
						}],
						// 操作日志信息
						logotableData:[{
							id:2,
							type:'重启服务器',
							time:'2020-11-25  11:24:46',
							status:'success',
							ip:'230102189'
						},{
							id:3,
							type:'啦啦啦啦',
							time:'2020-11-25  11:24:46',
							status:'fail',
							ip:'230102189'
						},{
							id:4,
							type:'啦啦啦啦',
							time:'2020-11-25  11:24:46',
							status:'fail',
							ip:'230102189'
						}],
						
						// 数据盘表格数据
						dataDisktableData:[{
							id:234,
							name: '小将云盘',
							property:'数据盘',
							type:'性能型',
							size:'50',
							status:'alive'
							
						}],
						// dataDisktableData:[],
						// 安全组信息数据
						safeGrouptableData: [{
									name:'第一安全组',
									desc:'系统安全组',
									connectMoudle:1,
									rulerNum:8,
									createTime:'2020-11-25  11:24:46',
						          }],
						fastPhototableData:[{
							id:'1231265121268596895626',
							remark:'备注说明',
							size:100,
							property:'系统盘',
							createTime:'2020-11-25  11:24:46'
						},{
							id:'1231265121168596895626',
							remark:'劳逸结合',
							size:50,
							property:'数据盘',
							createTime:'2020-11-25  11:24:46'
						},{
							id: '12551265121168596895626',
							remark:'啦啦啦',
							size:50,
							property:'数据盘',
							createTime:'2020-11-25  11:24:46'
						}],
						
						dialogRenewVisible:false, // 续费
						dialogAutoRenewVisible: false, // 自动续费
						addIpform: {
							canaddnum: undefined,
							price: '123.00'
						},
						addIpOptions: [], // 可添加Ip数量数组  需要计算
						dialogReturnScrollfastPhoto:false, // 回滚快照的dialog
						dialogRemovefastPhoto:false,// 删除快照的提示框
						dialogAddfastPhoto:false , // 添加快照dialog
						dialogRemoveServer:false, // 删除云盘dialog
						dialogAddCloudServer:false,// 添加云盘
						dialogUnbindServer:false, // 解绑云主机的显藏
						dialogAddIpVisible: false, // 添加Ipdialog 是否显示
						serverInfo: {
							isHidePassword: true, // 默认为隐藏密码
						},
						activeTabName: 'first', // 默认显示第一个 即用户管理
						haveAdditionIp: true, // 是否有附加IP
						maxAdditionIpNum: 5, // 最大可添加的附加IP数
						// 附加Ip数据
						additonIpData: [{
							alredyHaveIp: '112.103.2.169',
							addTime: '2016-05-02',
						}, {
							alredyHaveIp: '112.103.2.169',
							addTime: '2016-05-02',
						}, {
							alredyHaveIp: '112.103.2.169',
							addTime: '2016-05-02',
						}],
						// 续费产品信息
						reNewProductInfo: [{
							productType: '服务器类型名称',
							productName: '服务器自定义名称',
							cpu: 1,
							dataDisk: 100,
							raw: 2,
							bindWith: 2,
							ssd: 50,
							opearSystem: 'Windows',
							ip: 1,
							ipaddress: '192.106.1.120',
							sumMoney: 1381.06,
							serverType: '计算型',
							date: '2020-12-04'
						}],


						activeRenewTime: 'year', // 用户选择的续费周期  默认为年
						// 续费周期
						renewButtonGroup: [{
							value: 'month',
							name: '1个月',
							haveSale: false, // 是否有优惠

						}, {
							value: 'quarter',
							name: '3个月',
							haveSale: false, // 是否有优惠
						}, {
							value: 'halfYear',
							name: '6个月',
							haveSale: false, // 是否有优惠
						}, {
							value: 'year',
							name: '1年',
							haveSale: true, // 是否有优惠
							saleContext: '立即优惠1个月费用'
						}, {
							value: 'doubleYear',
							name: '2年',
							haveSale: true, // 是否有优惠
							saleContext: '立即优惠2个月费用'
						}, {
							value: 'threeYear',
							name: '3年',
							haveSale: true, // 是否有优惠
							saleContext: '立即优惠3个月费用'
						}],
						// 用户选择的
						activeAutoRenewTime: 'beforeTime10',

						// 自动续费周期组
						autoRenewTimeGroup: [{
							value: 'beforeTime10',
							name: '到期前10天',
							haveSale: false, // 是否有优惠
						}, {
							value: 'beforeTime15',
							name: '到期前15天',
							haveSale: false, // 是否有优惠
						}, {
							value: 'beforeTime20',
							name: '到期前20天',
							haveSale: false, // 是否有优惠
						}],
						// 快照分页信息
						fastPhotopageInfo: {
							pagesize: 5,
							currentPage:1,
							totalSize: 200
						},
						logpageInfo:{
							pagesize: 5,
							currentPage:1,
							totalSize: 100
						},
						fastPhotopageOptions: [ {
						  value:  5,
						  label: '5条/页'
						}],
						logpageOptions: [ {
						  value:  5,
						  label: '5条/页'
						}],
						selectEcharts: undefined, // 当前选择的echarts
						// 操作日志时间范围
						logTimeRange: [],
						// 所有echarts图表操作范围
						allEchartsTimeRange:[],
						// 选择的echarts图表操作范围
						selectEchartsTimeRange:[],
						isOpearing: false,// 是否正在操作中
						dialogStartServer:false, // 启动服务器的dialog
						dialogRestartServer:false , // 重启服务器的dialog
						dialogCloseServer:false, // 关闭服务器的dialog
						dialogResetPassword:false, // 重设密码的dialog
						dialogResetSystem:false, // 重装系统的dialog
						dialogResetSystemDetail:false, // 详细重装系统的diaLog
						dialogEcharts:false, // 选择放大的echarts dialog
						dialogVerifyIdentity: false, // 身份验证的dialog
						restartRadio:'1', // 重启服务器的方式  1 为推荐选项 ; 2为非推荐选项
						closeRadio:'1', // 关闭服务器的方式  1 为推荐选项 ; 2为强制关机
						resetSystemRadio:undefined,
						resetSystemSelectIndex: 0, // 重置系统方式选择  0 为当前系统   1为其他系统
						alreadAceessVerify: false, // 是否已经通过验证
						verificationCode:undefined, // 身份验证码
						phoneCanSendverificationCode: true, // 是否能够发送验证码
						phoneWaitVerificationCodeNum: 60,  // 手机注册 验证码等待的初始时间
						phoneWaitVerificationCodeTimer: null, // 手机注册等待验证码 计时器
						rightVerificationCode:'12345', // 正确的验证码
						isErrorverifiCode: false, // 验证码是否是错误
						adllEcharsTimeSelect: 'oneDay', // echarts 时间选择
						selectEcharsTimeSelect:'oneDay', // 弹框echarts 时间选择
						allEcharsTimeOptions:[{
							value:'oneDay',
							label:'最近一天',
						},{
							value:'threeDay',
							label:'最近三天',
						},{
							value:'sevenDay',
							label:'最近七天',
						},{
							value:'oneMonth',
							label:'最近一个月',
							}
						], // echats 图表时间数组
						optioncpu:{} ,// cpu 图表数据
						optionmemory:{},
						optionbindwith:{},
						optioncloudDisk:{},
						selectCloudDisk:undefined, // 选择的云盘
						cloudDiskOptions:[{
							id:1,
							label:'磁盘1'
						},{
							id:2,
							label:'磁盘2'
						}],
						myChartcpu:undefined, // echarts dom
						myChartmemory:undefined,
						myChartbindwith:undefined,
						myChartcloudDisk:undefined
					}
				},

				methods: {
					// 放大Echarts关闭
					closeddialogEcharts:function() {
						// 初始化
						this.selectCloudDisk = this.cloudDiskOptions[0].id
						this.selectEcharts = undefined
						this.selectEcharsTimeSelect = 'oneDay'
						this.selectEchartsTimeRange = []
						
					},
					// 放大echarts
					blowUpEcharts:_throttle(function(key) {
						this.selectEcharts = key
						this.dialogEcharts = true
						let that = this
											this.$nextTick(function() {
												// 带宽
												var myCharDetail = echarts.init(document.getElementById('echarts-detail-wrapper'));
												var optionDetail
												optionDetail = {}
												if(this.selectEcharts === undefined) {
													optionDetail = {}
												}else if(this.selectEcharts === 'cpu') {
													optionDetail = that.optioncpu
												}else if(this.selectEcharts === 'bindwith') {
													optionDetail = that.optionbindwith
												}else if(this.selectEcharts === 'memory') {
													optionDetail = that.optionmemory
												}else if(this.selectEcharts === 'cloudDisk') {
													that.selectCloudDisk = that.cloudDiskOptions[0].id
													optionDetail = that.optioncloudDisk
												}
												// 重绘的方法
												myCharDetail.setOption(optionDetail,true) 
											})

						
						
					}),
					// 处理charts title的方法
					handleEchartsTitle: function() {
						if(this.selectEcharts === undefined) {
							return ' '
						}else if(this.selectEcharts === 'cpu') {
							return 'CPU使用率(%)'
						}else if(this.selectEcharts === 'bindwith') {
							return '带宽用量(Kbsp)'
						}else if(this.selectEcharts === 'memory') {
							return '内存用量(MB)'
						}else if(this.selectEcharts === 'cloudDisk') {
							return '云盘(I/O)'
						}
					},
					// 刷新echarts
					refreshEcharts: _throttle(function() {
						console.log('刷新echarts的方法')
					}),
					
					// 下载echarts
					downLoadEcharts: _throttle(function() {
						console.log('下载echarts的方法')
					}),
					
					// 确认身份验证
					confirmVerifyIdentity: _throttle(function() {
						if(this.verificationCode !== this.rightVerificationCode) {
							// 验证码错误
							console.log('验证码错误')
							this.isErrorverifiCode = true
						}
					}),
					
					// 处理发送验证码的文案
					handleVerificationCodeText:function() {
					    if(this.phoneCanSendverificationCode === true) {
					      return '发送验证码'
					    }else  {
						  
						  return '已发送(' + this.phoneWaitVerificationCodeNum + 's)'
					    }
					},
					
					// 发送验证码
					handleClickSendverificationCode: _throttle(function(key) {
					    if(this.phoneCanSendverificationCode ===  false) {
					      return
					    }
					    this.phoneCanSendverificationCode = false
						let that = this
					    this.phoneWaitVerificationCodeTimer =  setInterval( function() {
					        that.phoneWaitVerificationCodeNum--
					        if( that.phoneWaitVerificationCodeNum === 0 || that.phoneWaitVerificationCodeNum < 0 ) {
					           clearTimeout(that.phoneWaitVerificationCodeTimer)
					           that.phoneCanSendverificationCode = true
					           that.phoneWaitVerificationCodeNum = 60
							   that.isErrorverifiCode = false
					        }
					    },1000)
					
					}),
					
					// 身份验证dialog关闭
					closedialogVerifyIdentity: function() {
						// 初始化
						this.phoneCanSendverificationCode = true
						this.phoneWaitVerificationCodeNum = 60
						this.isErrorverifiCode = false
						this.verificationCode = undefined
					},
					
					// 点击重设密码
					handleClickResetPassword: _throttle(function() {
						console.log('点击密码')
						this.dialogResetPassword =  true
					}),
					
					//确认重设密码
					confirmResetPassword: _throttle(function() {
						console.log('确认重设密码')
						this.dialogResetPassword = false
						// 如果没有通过验证
						if(!this.alreadAceessVerify) {
							// 身份验证dialog 出现
							this.dialogVerifyIdentity = true
						}
						
					}),
					
					// 确认详细重装系统
					confirmResetSystemDeatail:_throttle(function() {
						console.log('确认重装系统   具体到操作系统')
						this.dialogResetSystemDetail  = false
					}),
					// 确认重装系统
					confirmResetSystem: _throttle(function() {
						if(this.resetSystemRadio === '1') {
							console.log('先执行关机操作')
						}
						this.dialogResetSystem = false
						
						// 重装系统 详细弹窗 弹出
						this.dialogResetSystemDetail = true
						
					}),
					// 点击重装系统
					handleClickResetSystem: _throttle(function() {
						this.dialogResetSystem = true
					}),
					
					// 点击关闭服务器
					handleClickCloseserver:_throttle(function() {
						this.dialogCloseServer = true
					}),
					
					// 确认关闭服务器
					
					confirmCloseserver:_throttle(function() {
						this.isOpearing = true
						this.dialogCloseServer = false
						let that = this
						if(this.closeRadio === '1') {
							console.log('按推荐方式 进行关机')
						}else if(this.closeRadio === '2'){
							console.log('按非推荐方式 进行关机  强制关机')
						}
						// 模拟接口  3s 获取请求数据
						setTimeout(function() {
							that.isOpearing = false
							
						},3000)
					}),
					// 详细重启服务器dialog关闭
					closedialogResetSystemDetail:function() {
						this.resetSystemSelectIndex = 0
					},
					// 重启服务器dialog关闭
					closedialogRestartServer:function() {
						this.restartRadio = '1'
					},
					// 关闭服务器dialog关闭
					closedialogClosedServer:function() {
						this.closeRadio = '1'
					},
					// 重装系统dialog 关闭
					closedialogResetSystem: function() {
						this.resetSystemRadio = undefined
					},
					
					
					// 点击重启服务器
					handleClickRestartserver:_throttle(function() {
						this.dialogRestartServer = true
					}),
					// 确认重启服务器
					
					confirmRestartserver:_throttle(function() {
						this.isOpearing = true
						this.dialogRestartServer = false
						let that = this
						if(this.restartRadio === '1') {
							console.log('按推荐方式 进行重启')
						}else if(this.restartRadio === '2'){
							console.log('按非推荐方式 进行重启  强制重启')
						}
						// 模拟接口  3s 获取请求数据
						setTimeout(function() {
							that.isOpearing = false
							
						},3000)
					}),
					// 点击启动服务器
					handleClickStartserver:_throttle(function() {
						this.dialogStartServer = true
					}),
					
					// 确认启动服务器
					confirmStartserver: _throttle(function() {
						this.isOpearing = true
						this.dialogStartServer = false
						let that = this
						// 模拟接口  3s 获取请求数据
						setTimeout(function() {
							that.isOpearing = false
							
						},3000)
						
					}),
					
					// 改变日志选择时间
					changeLogselectTime:function(val) {
						console.log(val)
					},
					// 改变所有的echarts选择时间
					changeAllEchartsSelectTime:function(val) {
						console.log(val)
					},
					//改变选择的echarts选择时间
					changeSelectEchartsSelectTime:function(val) {
						console.log(val)
					},
					
					handleSizeLogChange:function(val) {
										console.log('日志每页xxxx条')
					},
					handleCurrentLogChange:function(val) {
										console.log('日志当前页为xxxxx')
					},
					handleSizeChange:function(val) {
										console.log('每页xxxx条')
					},
					handleCurrentChange:function(val) {
										console.log('当前页为xxxxx')
					},
					// 确认回滚快照的方法
					confirmReturnScrollfastPhoto:_throttle(function() {
						console.log('确认回滚快照的方法')
						console.log(this.activeSelectfastPhoto)
						this.dialogReturnScrollfastPhoto =  false
					}),
					
					// 点击回滚快照的方法
					returnScrollFastphoto:_throttle(function(row) {
						console.log('点击回滚快照的方法')
						this.activeSelectfastPhoto = row
						this.dialogReturnScrollfastPhoto = true
					}),
					// 点击删除快照的方法
					deleteFastphoto:_throttle(function(row) {
						console.log('点击删除快照的方法')
						this.activeSelectfastPhoto = row
						this.dialogRemovefastPhoto = true
					}),
					
					// 确认删除快照的方法
					confirmRemovefastPhoto:_throttle(function() {
						console.log('确认删除快照的方法')
						console.log(this.activeSelectfastPhoto)
						this.dialogRemovefastPhoto = false
						
					}),
					
					// 确认创建快照的方法
					confirmAddfastPhoto:_throttle(function() {
						console.log('确认创建快照的方法')
						this.dialogAddfastPhoto = false
					}),
					
					// 关闭添加快照的dialog
					closedialogAddfastPhoto:function() {
						// 初始化
						this.addfastPhotoform = {
							diskId:undefined,
							// data 数据盘  ；system 系统盘
							type:'data',
							remark:''
						}
					},
					
					// 点击删除云盘
					handleClickremoveDisk:function(item,index) {
						this.addcloudServerGroup = this.addcloudServerGroup.filter(function(addItem,addIndex) {
							return addIndex !== index
						})
					},
					
					// 点击添加云盘
					handleClickAddDisk:function() {
						let canAddNum = this.canAddDiskNum()
						console.log(canAddNum)
						if(canAddNum === 0) {
							return
						}
						
						this.addcloudServerGroup.push({
							type:'performance',
							num:10
						})
					},
					
					// 计算还可以添加的磁盘
					canAddDiskNum:function() {
						let num
						let maxNum =  3 // 最多3块磁盘
						
						if(this.dataDisktableData.length === maxNum - 1) {
							return 0
						}
						
						// 为0时 可以添加2块
						if(this.dataDisktableData.length === 0) {
							if(this.addcloudServerGroup.length === 1) {
								return  maxNum - 1
							}else {
								num = maxNum - this.addcloudServerGroup.length
							}
						}else {
							num = maxNum - this.addcloudServerGroup.length - 1
						}
						
						
						if(num > 0 ) {
							return num
						} 
						return 0
					},
					// 限制输入
					handlecloudServerNumChange: function(val) {
						let num = $('.inputNumber-wrapper .inputNumber input').val()
						let maxNum = 1000
						// 最多只能4位
						if(num.length > 4) {
							$('.inputNumber-wrapper .inputNumber input').val(maxNum)
						}
						
					},
					
					// 关闭添加云盘的dialog的方法
					closedialogAddCloudServer: function() {
						// 初始化 添加数据盘信息数据
						this.addcloudServerGroup = [{
							type:'performance',
							num:10
						}]
					},
					
					// 确认添加云盘的方法
					confirmAddCloudServer:_throttle(function() {
						console.log('确认添加云盘的方法')
					}),
					// 挂载数据盘的方法
					mountDatadisk:_throttle(function(row) {
						console.log('挂载数据盘的方法')
					}),
					// 卸载数据盘的方法
					unloadDatadisk:_throttle(function(row) {
						console.log('卸载数据盘的方法')
					}),
					
					// 删除数据盘的方法
					deleteDatadisk: _throttle(function(row) {
						console.log('删除数据盘的方法')
						this.activeSelectDisk =  row
						this.dialogRemoveServer =  true
						
					}),
					// 处理日志状态
					handleLogstatus: function(row) {
						switch (row.status) {
							// 成功  success ； 失败 fail
							case 'success':
								return '<p>成功</p>'
							case 'fail':
								return '<p style="color:#F21C30">失败</p>'
							default:
								break;
						}
					},
					
					//处理状态
					handlestatus: function(row) {
						//  运行中 alive   空闲中 free   
						switch (row.status) {
							case 'alive':
								return '<p style="color:#3FBF70">运行中</p>'
							case 'free':
								return '<p>空闲中</p>'
							default:
								break;
						}
					
					},
					
					//创建数据盘
					createDisk:_throttle(function() {
						console.log('创建数据盘')
						// 三块 或 三块以上 不能新建
						if(this.dataDisktableData.length > 2) {
							return
						}
						this.dialogAddCloudServer = true
						
					}),
					
					// 确定解绑云主机
					confirmUnbindServer:_throttle(function() {
						console.log('确定解绑云主机')
						
						
						this.dialogUnbindServer = false
					}),
					
					// 解绑云主机 dialog出现
					handleClickUntieCloud:_throttle(function(row) {
						console.log('解绑云主机')
						this.dialogUnbindServer = true
					}),
					// 确认删除云盘的方法
					confirmRemoveServer:_throttle(function(row) {
						console.log('确认删除云盘的方法')
						console.log(this.activeSelectDisk)
						this.dialogRemoveServer =  false
					}),
					
					handleClickConfigRuler:function(row) {
						console.log('配置规则')
					},
					// 确认续费的方法
					confirmRenew:_throttle(function() {
						console.log('确认续费的方法')
						this.dialogRenewVisible =  false
					}),
					// 关闭续费弹窗的方法
					cancelRenew: function() {
						this.dialogRenewVisible =  false
					},
					// 确认自动续费的方法
					confirmautoRenew: _throttle(function() {
						console.log('确认自动续费')
						this.dialogAutoRenewVisible = false
					}),
					// 关闭自动续费弹窗的方法
					cancelautoRenew: function() {
						this.dialogAutoRenewVisible = false
					},
					// 选择续费周期的方法
					selectRenewTime: function(item) {
						this.activeRenewTime = item.value
						console.log('选择周期', item)
					},

					// 获取可添加IP数组
					getAddIpOptions: function() {
						// 初始化
						this.addIpOptions = []
						let canAddNum = this.maxAdditionIpNum - this.additonIpData.length
						if (canAddNum > 0) {
							for (let i = 0; i < canAddNum; i++) {
								let label = i + 1
								label += '个'
								let value = i + 1
								this.addIpOptions.push({
									label: label,
									value: value
								})
							}
						}
					},
					// 点击添加Ip按钮
					handleClickAddIp: _throttle(function() {
						// 获取可添加IP数组
						this.getAddIpOptions()

						this.dialogAddIpVisible = true
					}),
					// 确认添加IP
					confirmAddIp: _throttle(function() {
						console.log('确认添加Ip')
						console.log('添加的个数', this.addIpform.canaddnum)
						this.dialogAddIpVisible = false
					}),
					clickTabSecond: function() {
						let that = this
						this.$nextTick(function() {
							//cpu
							that.myChartcpu = echarts.init(document.getElementById('echarts-cpu-wrapper'));
							that.optioncpu = {
							      backgroundColor: '#fff',
							      tooltip: {
							          trigger: 'axis',
							          axisPointer: {
							              lineStyle: {
							                  type:'dashed',
							                  color: '#D7D7D7'
							              },
							          },
							          padding:[15,15,15,15],
							          backgroundColor:'#fff',
							          textStyle:{
							              color:'#777',
							              fontSize:14
							          },
							          formatter:function(params,ticket,callback) {
							              let res
							              if(params.length > 0) {
							                  
							                  // 取到时间的值  因为多个点在同一x轴的值是一样的 所以取第一个即可
							                  let timeText = params[0].axisValue
							                  if(timeText !== undefined) {
							                      res = '<div style="line-height:14px;margin-bottom: 10px;">' + timeText + '</div>'
							                  }
							                  
							                      for(let i = 0; i < params.length  ;i++) {
							                          res += '<div style="display: flex;"><span>'
													  
													  
													  if(i === 0) {
														  res += '<img style="margin-top:3px;margin-right:5px;position:relation;top:4px;width:16px;height:14px" src="./img/CPU.png" />'
													  }else if(i === 1) {
														   res += '<img style="margin-top:3px;margin-right:5px;position:relation;top:4px;width:16px;height:14px" src="./img/bandwidth-blue.png" />'
													  }
													  
													  res +=  params[i].seriesName +'</span>：<span>'+ params[i].value + '</span></div>'
													  
							                      }
							                  
							              }
							              
							              return res;
							          },
							          extraCssText:'box-shadow: 0px 4px 13px 1px rgba(1,24,167,0.1);border: 1px solid #D7D7D7;z-index:10'
							      },
							      grid: {
							          top: '10%',
							          left: '10%',
							          right: '10%',
							          bottom: '15%',
							          // containLabel: true
							      },
							      xAxis: [{
							          nameTextStyle:{
							              padding:[20,0,0,0]
							          },
							
							          type: 'category',
							          axisLine: {
							              show: true,
							              color:'#C4C4C4'
							          },
							          splitArea: {
							              show: false,
							          },
							          axisLabel: {
							              color: '#333',
							               // 坐标轴间距
							               margin:20,
										   formatter: function (value, index) {
													let texts =  value.split(' ')
													return  texts[0] + '\n' +  texts[1];
										   },
							          },
							          splitLine: {
							              show: false
							          },
							          boundaryGap: false,
							          data: ['2020-11-30 11:18:16', '2020-12-30 11:18:16', '2020-12-30 11:18:16', '2020-12-30 11:18:16', '2020-12-30 11:18:16', '2020-12-30 11:18:16'],
							  
							      }],
							          yAxis: {
							          nameTextStyle: {
										  show:false,
							              fontSize: 18,
							              color: '#333',
							              padding:[0,0,0,0]
							              
							          },
							          nameGap: 0,
							          axisLine: true,
							          axisLabel: {
							              fontSize: 14,
							              color: '#333',
							              // 坐标轴间距
							              margin:37
							              
							          },
							          splitLine: {
							              show: true,
							              lineStyle: {
							                  color: "#D7D7D7",
							                  width: 1,
							                  type:"dashed"
							              }
							  
							          }
							      },
							      series: [{
							              name: 'CPU使用率',
							              type: 'line',
							              smooth: true, //是否平滑
							              showAllSymbol: false,
							              // 该属性只在触摸的才显示Symbol
							              showSymbol:false,
							              // symbol: 'image://./static/images/guang-circle.png',
							              symbol: 'circle',
							              symbolSize: 5,
							              lineStyle: {
							                  // 线的颜色
							                  normal: {
							                      width:3,
							                      color: "#6462F3",
							                  },
							              },
							  
							              itemStyle: {
							                  color: "#fff",
							                  borderColor: "#6462F3",
							                  backgroundColor:"#fff",
							                  borderWidth: 3,
							                  // shadowColor: 'rgba(0, 0, 0, .3)',
							                  // shadowBlur: 0,
							                  // shadowOffsetY: 2,
							                  // shadowOffsetX: 2,
							              },
							              
							              tooltip: {
							                  show: true,
							              },
							              areaStyle: {
							                  normal: {
							                      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
							                              offset: 0,
							                              color: 'rgba(100,98,243,0.3)'
							                          },
							                          {
							                              // 渐变色终止的位置
							                              offset: 0.6,
							                              color: 'rgba(100,98,243,0)'
							                          }
							                      ], false),
							                      shadowColor: 'rgba(100,98,243,0.5)',
							                      shadowBlur: 20
							                  }
							              },
							              data: [502.84, 205.97, 332.79, 281.55, 398.35, 214.02, ]
							          },
							      ]
							  };
							that.myChartcpu.setOption(that.optioncpu) 
							
							// 内存
							that.myChartmemory = echarts.init(document.getElementById('echarts-memory-wrapper'));
							that.optionmemory = {
							      backgroundColor: '#fff',
							      tooltip: {
							          trigger: 'axis',
							          axisPointer: {
							              lineStyle: {
							                  type:'dashed',
							                  color: '#D7D7D7'
							              },
							          },
							          padding:[15,15,15,15],
							          backgroundColor:'#fff',
							          textStyle:{
							              color:'#777',
							              fontSize:14
							          },
							          formatter:function(params,ticket,callback) {
							              let res
							              if(params.length > 0) {
							                  
							                  // 取到时间的值  因为多个点在同一x轴的值是一样的 所以取第一个即可
							                  let timeText = params[0].axisValue
							                  if(timeText !== undefined) {
							                      res = '<div style="line-height:14px;margin-bottom: 10px;">' + timeText + '</div>'
							                  }
							                  
							                      for(let i = 0; i < params.length  ;i++) {
							                          res += '<div style="display: flex;position:relation;"><span>'
													  
													  
													  if(i === 0) {
														  res += '<img style="display: inline-block;margin-top:3px;margin-right:7px;position:relation;top:7px;width:16px;height:14px" src="./img/memory-blue.png" />'
													  }else if(i === 1) {
														   res += '<img style="display: inline-block;margin-top:3px;margin-right:7px;position:relation;top:7px;width:16px;height:14px" src="./img/memory-green.png" />'
													  }
													  
													  res +=  params[i].seriesName +'</span>：<span>'+ params[i].value + '</span></div>'
													  
							                      }
							                  
							              }
							              
							              return res;
							          },
							          extraCssText:'z-index:10;box-shadow: 0px 4px 13px 1px rgba(1,24,167,0.1);border: 1px solid #D7D7D7;'
							      },
							      grid: {
							          top: '10%',
							          left: '10%',
							          right: '10%',
							          bottom: '15%',
							          // containLabel: true
							      },
							      xAxis: [{
							          nameTextStyle:{
							              padding:[20,0,0,0]
							          },
							
							          type: 'category',
							          axisLine: {
							              show: true,
							              color:'#C4C4C4'
							          },
							          splitArea: {
							              show: false,
							          },
							          axisLabel: {
							              color: '#333',
							               // 坐标轴间距
							               margin:20,
										   formatter: function (value, index) {
													let texts =  value.split(' ')
													return  texts[0] + '\n' +  texts[1];
										   },
							          },
							          splitLine: {
							              show: false
							          },
							          boundaryGap: false,
							          data: ['2020-11-30 11:18:16', '2020-12-30 11:18:16', '2020-12-30 11:18:16', '2020-12-30 11:18:16', '2020-12-30 11:18:16', '2020-12-30 11:18:16'],
							  
							      }],
							          yAxis: {
							              
							          nameTextStyle: {
							              fontSize: 18,
							              color: '#333',
							              padding:[0,0,0,0]
							              
							          },
							          nameGap: 0,
							          axisLine: true,
							          axisLabel: {
							              fontSize: 14,
							              color: '#333',
							              // 坐标轴间距
							              margin:37
							              
							          },
							          splitLine: {
							              show: true,
							              lineStyle: {
							                  color: "#D7D7D7",
							                  width: 1,
							                  type:"dashed"
							              }
							  
							          }
							      },
							      series: [{
							              name: '内存总量 (MB)',
							              type: 'line',
							              smooth: true, //是否平滑
							              showAllSymbol: false,
							              // 该属性只在触摸的才显示Symbol
							              showSymbol:false,
							              // symbol: 'image://./static/images/guang-circle.png',
							              symbol: 'circle',
							              symbolSize: 5,
							              lineStyle: {
							                  // 线的颜色
							                  normal: {
							                      width:3,
							                      color: "#6462F3",
							                  },
							              },
							  
							              itemStyle: {
							                  color: "#fff",
							                  borderColor: "#6462F3",
							                  backgroundColor:"#fff",
							                  borderWidth: 3,
							                  // shadowColor: 'rgba(0, 0, 0, .3)',
							                  // shadowBlur: 0,
							                  // shadowOffsetY: 2,
							                  // shadowOffsetX: 2,
							              },
							              
							              tooltip: {
							                  show: true,
							              },
							              areaStyle: {
							                  normal: {
							                      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
							                              offset: 0,
							                              color: 'rgba(100,98,243,0.3)'
							                          },
							                          {
							                              // 渐变色终止的位置
							                              offset: 0.6,
							                              color: 'rgba(100,98,243,0)'
							                          }
							                      ], false),
							                      shadowColor: 'rgba(100,98,243,0.5)',
							                      shadowBlur: 20
							                  }
							              },
							              data: [502.84, 205.97, 332.79, 281.55, 398.35, 214.02, ]
							          }
							      ]
							  };
							that.myChartmemory.setOption(that.optionmemory) 
							
							
							// 带宽
							that.myChartbindwith = echarts.init(document.getElementById('echarts-bindwith-wrapper'));
							that.optionbindwith = {
							      backgroundColor: '#fff',
							      tooltip: {
							          trigger: 'axis',
							          axisPointer: {
							              lineStyle: {
							                  type:'dashed',
							                  color: '#D7D7D7'
							              },
							          },
							          padding:[15,15,15,15],
							          backgroundColor:'#fff',
							          textStyle:{
							              color:'#777',
							              fontSize:14
							          },
							          formatter:function(params,ticket,callback) {
							              let res
							              if(params.length > 0) {
							                  
							                  // 取到时间的值  因为多个点在同一x轴的值是一样的 所以取第一个即可
							                  let timeText = params[0].axisValue
							                  if(timeText !== undefined) {
							                      res = '<div style="line-height:14px;margin-bottom: 10px;">' + timeText + '</div>'
							                  }
							                  
							                  if(params.length > 1) {
							                      for(let i = 0; i < params.length  ;i++) {
							                          res += '<div style="display: flex;"><span>'
													  
													  
													  if(i === 0) {
														  res += '<img style="margin-top:3px;margin-right:5px;position:relation;top:4px;width:16px;height:14px" src="./img/bandwidth-green.png" />'
													  }else if(i === 1) {
														   res += '<img style="margin-top:3px;margin-right:5px;position:relation;top:4px;width:16px;height:14px" src="./img/bandwidth-blue.png" />'
													  }
													  
													  res +=  params[i].seriesName +'</span>：<span>'+ params[i].value + '</span></div>'
													  
							                      }
							                  }
							                  
							              }
							              
							              return res;
							          },
							          extraCssText:'z-index:10;box-shadow: 0px 4px 13px 1px rgba(1,24,167,0.1);border: 1px solid #D7D7D7;'
							      },
							      grid: {
							          top: '10%',
							          left: '10%',
							          right: '10%',
							          bottom: '15%',
							          // containLabel: true
							      },
							      xAxis: [{
							          nameTextStyle:{
							              padding:[20,0,0,0]
							          },

							          type: 'category',
							          axisLine: {
							              show: true,
							              color:'#C4C4C4'
							          },
							          splitArea: {
							              show: false,
							          },
							          axisLabel: {
							              color: '#333',
							               // 坐标轴间距
							               margin:20,
										   formatter: function (value, index) {
													let texts =  value.split(' ')
													return  texts[0] + '\n' +  texts[1];
										   },
							          },
							          splitLine: {
							              show: false
							          },
							          boundaryGap: false,
							          data: ['2020-11-30 11:18:16', '2020-12-30 11:18:16', '2020-12-30 11:18:16', '2020-12-30 11:18:16', '2020-12-30 11:18:16', '2020-12-30 11:18:16'],
							  
							      }],
							          yAxis: {
							              
							          nameTextStyle: {
							              fontSize: 18,
							              color: '#333',
							              padding:[0,0,0,0]
							              
							          },
							          nameGap: 0,
							          axisLine: true,
							          axisLabel: {
							              fontSize: 14,
							              color: '#333',
							              // 坐标轴间距
							              margin:37
							              
							          },
							          splitLine: {
							              show: true,
							              lineStyle: {
							                  color: "#D7D7D7",
							                  width: 1,
							                  type:"dashed"
							              }
							  
							          }
							      },
							      series: [{
							              name: '进 (Kbps)',
							              type: 'line',
							              smooth: true, //是否平滑
							              showAllSymbol: false,
							              // 该属性只在触摸的才显示Symbol
							              showSymbol:false,
							              // symbol: 'image://./static/images/guang-circle.png',
							              symbol: 'circle',
							              symbolSize: 5,
							              lineStyle: {
							                  // 线的颜色
							                  normal: {
							                      width:3,
							                      color: "#6462F3",
							                  },
							              },
							  
							              itemStyle: {
							                  color: "#fff",
							                  borderColor: "#6462F3",
							                  backgroundColor:"#fff",
							                  borderWidth: 3,
							                  // shadowColor: 'rgba(0, 0, 0, .3)',
							                  // shadowBlur: 0,
							                  // shadowOffsetY: 2,
							                  // shadowOffsetX: 2,
							              },
							              
							              tooltip: {
							                  show: true,
							              },
							              areaStyle: {
							                  normal: {
							                      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
							                              offset: 0,
							                              color: 'rgba(100,98,243,0.3)'
							                          },
							                          {
							                              // 渐变色终止的位置
							                              offset: 0.6,
							                              color: 'rgba(100,98,243,0)'
							                          }
							                      ], false),
							                      shadowColor: 'rgba(100,98,243,0.5)',
							                      shadowBlur: 20
							                  }
							              },
							              data: [502.84, 205.97, 332.79, 281.55, 398.35, 214.02, ]
							          },
							          {
							              name: '出 (Kbps)',
							              type: 'line',
							              smooth: true, //是否平滑
							              showSymbol:false,
							              showAllSymbol: false,
							              // symbol: 'image://./static/images/guang-circle.png',
							              symbol: 'circle',
							              symbolSize: 5,
							              lineStyle: {
							                  normal: {
							                      width:3,
							                      color: "#3FBF70",
							                  },
							              },
							              itemStyle: {
							                  color: "#fff",
							                  borderColor: "#3FBF70",
							                  backgroundColor:"#fff",
							                  borderWidth: 3,
							              },
							              tooltip: {
							                  show: true
							              },
							              areaStyle: {
							                  normal: {
							                      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
							                              offset: 0,
							                              color: 'rgba(63,191,112,0.3)'
							                          },
							                          {
							                              offset: 0.6,
							                              color: 'rgba(63,191,112,0)'
							                          }
							                      ], false),
							                      shadowColor: 'rgba(63,191,112,0.5)',
							                      shadowBlur: 20
							                  }
							              },
							              data: [281.55, 398.35, 214.02, 179.55, 289.57, 356.14, ],
							          },
							      ]
							  };
							that.myChartbindwith.setOption(that.optionbindwith) 
							
							// 云盘
							that.myChartcloudDisk = echarts.init(document.getElementById('echarts-cloudDisk-wrapper'));
							that.optioncloudDisk = {
							      backgroundColor: '#fff',
							      tooltip: {
							          trigger: 'axis',
							          axisPointer: {
							              lineStyle: {
							                  type:'dashed',
							                  color: '#D7D7D7'
							              },
							          },
							          padding:[15,15,15,15],
							          backgroundColor:'#fff',
							          textStyle:{
							              color:'#777',
							              fontSize:14
							          },
							          formatter:function(params,ticket,callback) {
							              let res
							              if(params.length > 0) {
							                  
							                  // 取到时间的值  因为多个点在同一x轴的值是一样的 所以取第一个即可
							                  let timeText = params[0].axisValue
							                  if(timeText !== undefined) {
							                      res = '<div style="line-height:14px;margin-bottom: 10px;">' + timeText + '</div>'
							                  }
							                  
							                  if(params.length > 1) {
							                      for(let i = 0; i < params.length  ;i++) {
							                          res += '<div style="display: flex;position:relation;"><span>'
													  
													  
													  if(i === 0) {
														  res += '<img style="display: inline-block;margin-top:3px;margin-right:7px;position:relation;top:7px;width:16px;height:14px" src="./img/memory-blue.png" />'
													  }else if(i === 1) {
														   res += '<img style="display: inline-block;margin-top:3px;margin-right:7px;position:relation;top:7px;width:16px;height:14px" src="./img/memory-green.png" />'
													  }
													  
													  res +=  params[i].seriesName +'</span>：<span>'+ params[i].value + '</span></div>'
													  
							                      }
							                  }
							                  
							              }
							              
							              return res;
							          },
							          extraCssText:'z-index:10;box-shadow: 0px 4px 13px 1px rgba(1,24,167,0.1);border: 1px solid #D7D7D7;'
							      },
							      grid: {
							          top: '10%',
							          left: '10%',
							          right: '10%',
							          bottom: '15%',
							          // containLabel: true
							      },
							      xAxis: [{
							          nameTextStyle:{
							              padding:[20,0,0,0]
							          },
							
							          type: 'category',
							          axisLine: {
							              show: true,
							              color:'#C4C4C4'
							          },
							          splitArea: {
							              show: false,
							          },
							          axisLabel: {
							              color: '#333',
							               // 坐标轴间距
							               margin:20,
										   formatter: function (value, index) {
													let texts =  value.split(' ')
													return  texts[0] + '\n' +  texts[1];
										   },
							          },
							          splitLine: {
							              show: false
							          },
							          boundaryGap: false,
							          data: ['2020-11-30 11:18:16', '2020-12-30 11:18:16', '2020-12-30 11:18:16', '2020-12-30 11:18:16', '2020-12-30 11:18:16', '2020-12-30 11:18:16'],
							  
							      }],
							          yAxis: {
							          nameTextStyle: {
							              fontSize: 18,
							              color: '#333',
							              padding:[0,0,0,0]
							              
							          },
							          nameGap: 0,
							          axisLine: true,
							          axisLabel: {
							              fontSize: 14,
							              color: '#333',
							              // 坐标轴间距
							              margin:37
							              
							          },
							          splitLine: {
							              show: true,
							              lineStyle: {
							                  color: "#D7D7D7",
							                  width: 1,
							                  type:"dashed"
							              }
							  
							          }
							      },
							      series: [{
							              name: '内存总量 (MB)',
							              type: 'line',
							              smooth: true, //是否平滑
							              showAllSymbol: false,
							              // 该属性只在触摸的才显示Symbol
							              showSymbol:false,
							              // symbol: 'image://./static/images/guang-circle.png',
							              symbol: 'circle',
							              symbolSize: 5,
							              lineStyle: {
							                  // 线的颜色
							                  normal: {
							                      width:3,
							                      color: "#6462F3",
							                  },
							              },
							  
							              itemStyle: {
							                  color: "#fff",
							                  borderColor: "#6462F3",
							                  backgroundColor:"#fff",
							                  borderWidth: 3,
							                  // shadowColor: 'rgba(0, 0, 0, .3)',
							                  // shadowBlur: 0,
							                  // shadowOffsetY: 2,
							                  // shadowOffsetX: 2,
							              },
							              
							              tooltip: {
							                  show: true,
							              },
							              areaStyle: {
							                  normal: {
							                      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
							                              offset: 0,
							                              color: 'rgba(100,98,243,0.3)'
							                          },
							                          {
							                              // 渐变色终止的位置
							                              offset: 0.6,
							                              color: 'rgba(100,98,243,0)'
							                          }
							                      ], false),
							                      shadowColor: 'rgba(100,98,243,0.5)',
							                      shadowBlur: 20
							                  }
							              },
							              data: [502.84, 205.97, 332.79, 281.55, 398.35, 214.02, ]
							          },
							          {
							              name: '已用 (MB)',
							              type: 'line',
							              smooth: true, //是否平滑
							              showSymbol:false,
							              showAllSymbol: false,
							              // symbol: 'image://./static/images/guang-circle.png',
							              symbol: 'circle',
							              symbolSize: 5,
							              lineStyle: {
							                  normal: {
							                      width:3,
							                      color: "#3FBF70",
							                  },
							              },
							              itemStyle: {
							                  color: "#fff",
							                  borderColor: "#3FBF70",
							                  backgroundColor:"#fff",
							                  borderWidth: 3,
							              },
							              tooltip: {
							                  show: true
							              },
							              areaStyle: {
							                  normal: {
							                      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
							                              offset: 0,
							                              color: 'rgba(63,191,112,0.3)'
							                          },
							                          {
							                              offset: 0.6,
							                              color: 'rgba(63,191,112,0)'
							                          }
							                      ], false),
							                      shadowColor: 'rgba(63,191,112,0.5)',
							                      shadowBlur: 20
							                  }
							              },
							              data: [281.55, 398.35, 214.02, 179.55, 289.57, 356.14, ],
							          },
							      ]
							  };
							that.myChartcloudDisk.setOption(that.optioncloudDisk) 
						})
						  

					},
					handleClickTab: function(tab) {
						let name = tab.name
						if(name === 'second') {
							this.clickTabSecond()
						}
						
					},
					// 计算可以添加的Ip
					canAddIp: function() {
						let num = this.maxAdditionIpNum - this.additonIpData.length
						return num
					},
					resize:function() {
						try{
							this.myChartcpu.resize()
							this.myChartmemory.resize()
							this.myChartbindwith.resize()
							this.myChartcloudDisk.resize()
						}catch(e){
							//TODO handle the exception
						}
					}
				},
				mounted: function() {
					window.addEventListener('resize', this.resize)
				}

			})
		</script>
	</body>
</html>
